<template>
	<view class="btn-box flex-center" :style="{ ...styleDefault}" @tap="click">
		{{text}}
	</view>
	<up-safe-bottom></up-safe-bottom>
</template>

<script setup>
	const $emit = defineEmits()
	const props = defineProps({
		color: {
			type: [String, Number],
			default:'#ddd'
		},
		size: {
			type: [String, Number],
			default: '30rpx'
		},
		text: {
			type: String,
			default: ''
		},
		weight: {
			type: [String, Number],
			default: 'bold'
		}
	});

	const styleDefault = {
		fontSize: props.size,
		fontWeight: props.weight,
		background: $use.colorObj().primary,
	};

	const click = () => {
		$emit('click');
	};
</script>

<style lang="scss" scoped>
	.btn-box{
		width: 686rpx;
		height: 100rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		color: #FFF;
		margin: auto;
	}
</style>